<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css"/>
	</head>
	<body>
		<div id="app">
			<div class="panel panel-primary">
			  <div class="panel-heading">
				  <div class="panel-title">
				  	添加品牌
				  </div>
				  <!-- form-inline 一行内显示-->
			  </div>
			  <div class="panel-body form-inline">
			    <label>Id:
					<input type="text" class="form-control" v-model="id" />
				</label>
				<label>Name:
					<input type="text"  class="form-control" v-model="name"/>
				</label>
				<input type="button"  value="添加" class="btn btn-primary" @click="add()"/>
				<label>
					<input type="text" class="form-control" v-model="keywords" v-focus/>
				</label>
			  </div>
			</div>
			
			<table class="table table-striped table-hover table-bordered" >
				<thead>
					<tr>
						<th>Id</th>
						<th>Name</th>
						<th>ctime</th>
						<th>Operation</th>
					</tr>
				</thead>
					
				<tbody>
					<tr v-for="item in search(keywords)" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.ctime | dataFormat}}</td>
						<td><a href="" @click.prevent="delet(item.id)">删除</a></td>
					</tr>
					
				</tbody>  
					
				
				
					
					
				
			</table>
		</div>
		<script type="text/javascript">
			/* 如果通过全局配置了请求的数据接口，则每次单独发起请求的时候 url以相对路径开头，前面不能带‘/’ */
			/* 全局配置根接口及emulateJSON */
			Vue.http.options.root = 'http://www.liulongbin.top:3005';
			Vue.http.options.emulateJSON = true;
			var vm = new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					keywords:'',
					
					list:[//存放所有品牌列表的数组
						
					]
				},
				created(){//当vm的data和method初始化完毕后,会自动执行
					this.getAllList();
				},
				methods:{
					add(){
						var res = this.list.some(item => {
							
							if(item.name == this.name || this.id == ''  || this.name == ''){
								alert('数据不能为空且不能重复')
								return true;
							}
							
						
						})
						
						if(!res){
							//分析：
							//1、经过查看数据API接口，发现，要发送一个Post请求，this.$http.post
							//2、this.$http.post()中接收三个参数
							//2.1 url地址
							//2.2 要以对象行式提交给服务器数据{name:this.name}
							//2.3 配置对象 以那种表单数据类型提交过去{emulateJSON:true}，以普通表单格式，提交数据
							//{application/x-www-form-urlencoded}
							//3、在POST方法中.then设置成功的回调函数
							this.$http.post('api/addproduct',{ id:this.id,name: this.name}).then(result=>{
								if(result.body.status === 0){
									//成功
									this.getAllList();
									console.log(result);
								}else{
									alert('添加失败');
								}
							})
							this.id = this.name = '';
						}
						
						
					},
					delet(id){//删除品牌
						//get方法，通过？或者：接在url后传递参数 专注与业务逻辑，不考虑DOM
						this.$http.get('api/delproduct/'+ id).then(result=>{
							if(result.body.status === 0){
								//成功
								this.getAllList();
							}else{
								alert('删除失败');
							}
						})
					},
					search(keywords){
						var newlist = [];
						this.list.forEach(item=>{
							if(item.name.includes(keywords)){
								newlist.push(item);
							}
						})
						return newlist;
					},
					getAllList(){/* 获取所有品牌列表 */
						//分析：
						//1、由于已经导入Vue-resource这个包，可以直接通过this.$http 来发起数据请求
						//2、根据接口API文档，知道，获取列表的时候，应该发起一个get请求
						//3、this.$http.get('url').then(function(result)){}
						//4、当通过then指定回调函数后，在回调函数中，可以拿到result
						//5、先判断result.status是否等于0，即成功，把result.message赋值给this.list
						this.$http.get('api/getprodlist').then(result=>{
							if(result.body.status == 0){
								//成功了
								this.list = result.body.message;
								
							}else{
								//失败了
								console.log(result.body);
								alert('获取数据失败');
							}
						})
					}
				},
				filters:{
					dataFormat:(dateStr,pattern)=>{
						var dt = new Date(dateStr);
						var y = dt.getFullYear();
						var m = (dt.getMonth()+1).toString().padStart(2,'0');
						var d = dt.getDate().toString().padStart(2,'0');
						
						var hh = dt.getHours().toString().padStart(2,'0');
						var mm = dt.getMinutes().toString().padStart(2,'0');
						var ss = dt.getSeconds().toString().padStart(2,'0');
						return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
					}
				},
				directives:{
					'focus':{
						inserted(el,binding){
							el.focus();
							}
					}
				}
				
				
			})
		</script>
	</body>
</html>
